<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span class="demonstration">时间范围</span>
          <el-date-picker
            format="YYYY-MM-DD"
            v-model="dateValues"
            type="daterange"
            :picker-options="datePickerOptions"
            @change="changeDate"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </template>
      <el-row justify="center">
        <el-col :span="12">
          <div id="userSummaryChart" :style="{ width: '80%', height: '378px' }"></div>
        </el-col>
        <el-col :span="12">
          <div id="userCumulateChart" :style="{ width: '80%', height: '378px' }"></div>
        </el-col>
        <el-col :span="12">
          <div id="interfaceSummaryChart" :style="{ width: '80%', height: '378px' }"></div>
        </el-col>
        <el-col :span="12">
          <div id="interfaceSummaryChart2" :style="{ width: '80%', height: '378px' }"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup name="WxMpSummary">
import { dayjs } from 'element-plus'
// 引入基本模板
import * as echarts from 'echarts'
import { getInterfaceSummary, getUserSummary, getUserCumulate } from '@/api/wxmp/wxsummary'

import { getCurrentInstance, onMounted, reactive } from 'vue'

const { proxy } = getCurrentInstance()

const data = reactive({
  datePickerOptions: {
    disabledDate(date) {
      return date >= new Date(new Date() - 3600 * 1000 * 24)
    }
  },
  startDate: dayjs().add(-7, 'days').format('YYYY-MM-DD'),
  endDate: dayjs().add(-1, 'days').format('YYYY-MM-DD'),
  dateValues: [dayjs().add(-7, 'days').format('YYYY-MM-DD'), dayjs().add(-1, 'days').format('YYYY-MM-DD')],

  xAxisData: [],
  seriesData1: [],
  seriesData2: [],
  seriesData3: [],
  seriesData4: [],
  seriesData5: [],
  seriesData6: [],
  seriesData7: []
})
const {
  datePickerOptions,
  startDate,
  endDate,
  dateValues,
  xAxisData,
  seriesData1,
  seriesData2,
  seriesData3,
  seriesData4,
  seriesData5,
  seriesData6,
  seriesData7
} = toRefs(data)

onMounted(() => {
  getSummary()
})

function changeDate() {
  const startDate = new Date(data.dateValues[0])
  const endDate = new Date(data.dateValues[1])
  if (dayjs(endDate).diff(dayjs(startDate), 'day') > 6) {
    proxy.$message.error('时间间隔7天以内，请重新选择')
    return false
  } else {
    data.startDate = dayjs(startDate).format('YYYY-MM-DD')
    data.endDate = dayjs(endDate).format('YYYY-MM-DD')
    data.xAxisData = []
    data.seriesData1 = []
    data.seriesData2 = []
    data.seriesData5 = []
    data.seriesData6 = []
    getSummary()
  }
}

function getSummary() {
  const days = dayjs(data.endDate).diff(dayjs(data.startDate), 'day') //相差天数
  for (let i = 0; i <= days; i++) {
    data.xAxisData.push(dayjs(data.startDate).add(i, 'days').format('YYYY-MM-DD'))
    data.seriesData1.push(0)
    data.seriesData2.push(0)
    data.seriesData5.push(0)
    data.seriesData6.push(0)
  }
  getUserSummary({
    startDate: data.startDate,
    endDate: data.endDate
  })
    .then((response) => {
      data.xAxisData.forEach((item, index, arr) => {
        response.data.forEach((item2, index2, arr2) => {
          if (item2.refDate.indexOf(item) >= 0) {
            data.seriesData5[index] = data.seriesData5[index] + item2.newUser
            data.seriesData6[index] = data.seriesData6[index] + item2.cancelUser
          }
        })
      })
      // 基于准备好的dom，初始化echarts实例
      const userSummaryChart = echarts.init(document.getElementById('userSummaryChart'))
      // 绘制图表
      userSummaryChart.setOption({
        title: { text: '用户增减数据' },
        color: ['#67C23A', '#F56C6C'],
        legend: {
          data: ['新增用户', '取消关注的用户']
        },
        tooltip: {},
        xAxis: {
          data: data.xAxisData
        },
        yAxis: {},
        series: [
          {
            name: '新增用户',
            type: 'bar',
            label: {
              normal: {
                show: true
              }
            },
            barGap: 0,
            data: data.seriesData5
          },
          {
            name: '取消关注的用户',
            type: 'bar',
            label: {
              normal: {
                show: true
              }
            },
            data: data.seriesData6
          }
        ]
      })
    })
    .catch(() => {})

  getUserCumulate({
    startDate: data.startDate,
    endDate: data.endDate
  })
    .then((response) => {
      response.data.forEach((item, index, arr) => {
        data.seriesData7[index] = item.cumulateUser
      })
      // 基于准备好的dom，初始化echarts实例
      const userCumulateChart = echarts.init(document.getElementById('userCumulateChart'))
      // 绘制图表
      userCumulateChart.setOption({
        title: { text: '累计用户数据' },
        legend: {
          data: ['累计用户量']
        },
        xAxis: {
          type: 'category',
          data: data.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            name: '累计用户量',
            data: data.seriesData7,
            type: 'line',
            smooth: true
          }
        ]
      })
    })
    .catch(() => {})

  //获取接口数据
  getInterfaceSummary({
    startDate: data.startDate,
    endDate: data.endDate
  })
    .then((response) => {
      response.data.forEach((item, index, arr) => {
        data.seriesData1[index] = item.callbackCount
        data.seriesData2[index] = item.maxTimeCost
        data.seriesData3[index] = item.totalTimeCost
        data.seriesData4[index] = item.failCount
      })
      // 基于准备好的dom，初始化echarts实例
      const interfaceSummaryChart = echarts.init(document.getElementById('interfaceSummaryChart'))
      // 绘制图表
      interfaceSummaryChart.setOption({
        title: { text: '接口分析数据' },
        color: ['#67C23A', '#F56C6C'],
        legend: {
          data: ['被动回复用户消息的次数', '失败次数']
        },
        tooltip: {},
        xAxis: {
          data: data.xAxisData
        },
        yAxis: {},
        series: [
          {
            name: '被动回复用户消息的次数',
            type: 'bar',
            label: {
              normal: {
                show: true
              }
            },
            barGap: 0,
            data: data.seriesData1
          },
          {
            name: '失败次数',
            type: 'bar',
            label: {
              normal: {
                show: true
              }
            },
            data: data.seriesData4
          }
        ]
      })

      // 基于准备好的dom，初始化echarts实例
      const interfaceSummaryChart2 = echarts.init(document.getElementById('interfaceSummaryChart2'))
      // 绘制图表
      interfaceSummaryChart2.setOption({
        title: { text: '接口分析数据' },
        color: ['#E6A23C', '#409EFF'],
        legend: {
          data: ['最大耗时', '总耗时']
        },
        tooltip: {},
        xAxis: {
          data: data.xAxisData
        },
        yAxis: {},
        series: [
          {
            name: '最大耗时',
            type: 'bar',
            label: {
              normal: {
                show: true
              }
            },
            data: data.seriesData2
          },
          {
            name: '总耗时',
            type: 'bar',
            label: {
              normal: {
                show: true
              }
            },
            data: data.seriesData3
          }
        ]
      })
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.demonstration {
  font-size: 15px;
  margin-right: 10px;
}
</style>
